تبادل لینک هوشمند
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | شیوه کلی نگارش عناصر background در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
background:url(background.gif);
/*background-image:url(background.gif);*/
background-attachment:fixed;
background-color:#069;
background-position:top;
background-repeat:repeat-x;
}
</style>
</head>
<body>
</body>
</html>
توضیح:
- در کد بالا صفحه ای فرضی را با عناصر background شکل داده ایم.
- در قسمت مربوط به عکس پس زمینه می توان از background به صورت پیش فرض یا background-image به صورت حرفه ای تر، استفاده کرد.
- برای نوشتن یک نکته یا یادداشت در حین کدنویسی css از علامت /*یادداشت*/ استفاده می کنیم.
- در قسمت مربوط به url باید آدرس دایرکتوری (یا آدرس کامل تصویری که آپلود می کنید) را به همراه نام کامل فایل (با پسوند) قرار دهید.
- در کد بالا ما تصویری با ابعاد 5 پیکسل در 5 پیکسل را آنقدر در راستای محور x ها تکرار کرده ایم که سطر اول صفحه را به طور کامل پوشش داده است.
- رنگ پس زمینه صفحه را با background-color و یک مقدار هگز که به صورت 069# مشخص است، تنظیم کرده ایم.
- background-position موقعیت تصویر پس زمینه ما را در صفحه مشخص می کنید.
- background-repeat نیز مشخص می کند که نحوه تکرار شدن تصویر پس زمینه در صفحه به چه شکل باشد.
حال به بررسی جزئی تر هر یک از عناصر فوق می پردازیم.
عنصر background:
این عنصر می تواند مقادیر رنگی (هگز) یا آدرس یک تصویر را در خود داشته باشد:
.my-div-background{
background:#093;
}
برای حالت های شفاف می توان از مقادیر transparent استفاده کرد.
عنصر background-image:
آدرس یک تصویر را به صورت url در خود دارد، این قابلیت، تصویر پس زمینه ما را با توجه به زیرمجموعه ای که در آن تعریف شده است، مشخص می کند، به فرض ممکن است در یک بلاک div از آن استفاده کنیم و لذا این عنصر تصویر پس زمینه آن بلاک را شکل می دهد:
.my-div-background{
background-image:url(bgimage.jpg);
}
برای نادیده گرفتن این قابلیت مقدار آن را none قرار می دهند.
عنصر background-attachment:
background-attachment به مرورگر می گوید که آیا تصویر پس زمینه با اسکرول صفحه، اسکرول شود یا خیر، اگر مقادیر آن را fixed قرار دهید، در صفحاتی که ارتفاع آنها از صفحه نمایش کاربر بیشتر است، نوار اسکرول کناری نمایش داده می شود و اگر کاربر به پائین یا بالای صفحه برود، تصویر پس زمینه در جای خود بدون تغییر و ثابت خواهد بود (این تکنیکی است که در برخی از قالب های وبلاگ ها نیز مشاهده می شود):
.my-div-background{
background-attachment:fixed;
}
مقادیر دیگر این عنصر scroll است که حالت پیش فرض می باشد.
عنصر background-position:
background-position موقعیت تصویر پس زمینه ما را در محلی که استفاده شده، مشخص می کند، به فرض اگر بخواهیم تصویر خود را از سمت راست شروع به نمایش کنیم، باید از مقدار background-position:right استفاده کنیم؛ مثالی دیگر:
.my-div-background{
background-position:bottom;
}
.my-div-background2{
background-position:bottom left;
}
مقادیر این عنصر به صورت bottom، top، left، right و center است که قابلیت استفاده از دو خاصیت را به طور همزمان در خود دارد (به طور مثال background-position:top right).
عنصر background-repeat:
این عنصر برای مشخص کردن نحوه تکرار تصویر پس زمینه در صفحه به کار می رود، به فرض ممکن است بخواهیم تصویری تنها یک بار در پس زمینه تکرار شود یا برعکس بخواهیم که تمام پس زمینه را پوشش دهد، بدین منظور از این عنصر و خاصیت های آن استفاده می کنیم:
.my-div-background2{
background-repeat:repeat-y;
}
مقادیر background-repeat به صورت repeat ،no-repeat، repeat-x و repeat-y تعریف می شود.
این بخش را با یک مثال کمی پیشرفته تر به پایان می بریم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | شیوه پیشرفته استفاده از عناصر background در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
background-color:transparent;
height:1000px;
}
.bgdiv{
background-image:url(background.gif);
background-repeat:repeat;
background-position:bottom;
background-attachment:scroll;
background-color:#F90;
height:400px;
width:600px;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div class="bgdiv">
</div>
</body>
</html>
نظرات شما عزیزان:
موضوعات مرتبط: css ، ،
برچسب‌ها: